<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div class="container a-container" id="a-container">
    <form action="" method="post" class="form" id="a-form">
        {% csrf_token %}
        <h2 class="form_title title">创建账号</h2>
        <input type="text" class="form_input"placeholder="账号" name="username" id="name" onblur="nameCHECK()">
        <span class="name">2-18位数字和英文字母组成账号名</span>
        <input type="password" class="form_input"placeholder="密码" name="password1" id="pwd" onblur="pwdCHECK()">
        <span class="pwd">输入6-18位密码</span>
        <input type="password" class="form_input"placeholder="重复密码" name="password2" id="pwd1" onblur="pwdSure()">
        <span class="pwd">再次输入密码</span>
        <input type="text" class="form_input"placeholder="邮箱" name="email" id="email" onblur="emailCHECK()">
        <span class="email">ex:888888@qq.com</span>
        <script>
            {% if messages %}
                {% for meg in messages %}
                    alert('{{meg.message}}');
                {% endfor %}
        </script>
        <button class="form_button button" onclick="sub()" type="submit">注册</button>
    </form>
</div>
<div class="switch" id="switch-cnt">
    <div class="switch_circle"></div>
    <div class="switch_circle switch_circle-t"></div>
    <div class="switch_container" id="switch-c1">
        <h2 class="switch_title title" style="...">Welcome Back!</h2>
        <p class="switch_description description">有账号了，走，去shopping！</p>
        <button class="switch_button button switch-btn"><a href="/login/">登录</a> </button>
    </div>
</div>
<script src="http://code.query.com/jquery-3.3.1.js"></script>
<script>
    function sub(){
        if(nameCheck() && emailCheck() && pwdCheck() &&pwdSure()){
            alert('提交成功');
            }else{
            alert('×你的输入有误，按要求输入')}
        }
    function nameCheck(){
        let reg = /^((?![0-9]+$)(?![A-Za-z]+$)[0-9A-Za-z]{6,18}|)$/;
        let name =$("#name").val();
        if(!reg.test(name)||name==''){
            $(".name").html("<span class='red'>请输入6-18位由数字和英文组成的账号名</span>");
            return false;
            }else{
            $(".name").text('√');
            return true;
            }
        }
    function emailCheck(){
        let reg = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
        let email =$("#email").val();
        if(!reg.test(email)||email==''){
            $(".email").html("<span class='red'>请输入正确邮箱号</span>");
            return false;
            }else{
            $(".name").text('√');
            return true;
            }
        }
    function pwdCheck(){
        let reg = /^[\s\S]{6,18}/;
        let pwd =$("#pwd").val();
        if(!reg.test(pwd)||pwd==''){
            $(".pwd").html("<span class='red'>请输入6-18位密码</span>");
            return false;
            }else{
            $(".pwd").text('√');
            return true;
            }
        }
    function pwdSure(){
        if$("#pwd").val()===$("#pwd1").val()){
          $(".pwd").text('√');
            return true;
            }else{
             $(".pwd1").html("<span class='red'>两次输入不一致</span>")
             return false;
            }
        }
</script>
</body>
</html>